<template>
    <div class="app-container">
        <div class="header">
            <div class="word">
                <div class="w1">
                    车辆管理系统
                </div>
                <div class="w2">
                    在车辆系统中你可以查看你所拥有的车型，车辆状态等基本信息，同时还可以实现查询车型，添加车型等功能，提供一套可行的车辆管理方案
                </div>
                <div class="w2">
                    车辆管理系统是运输系统中重要的一环,它可以为我们提供车辆的信息，为下一步运输做准备
                </div>
            </div>
            <img class="imgDri" src="../static/744755874f516fff368e19000008fd92b0d611c816da2-9qoObM_fw658.webp">
        </div>
        <div class="index">
            <div class="searchHead">
                <el-button type="primary" @click="dialogFormVisible = true">新增车辆</el-button>
                <el-input v-model="input3" placeholder="请输入要查询的数据" class="searchIuput">
                    <el-select slot="prepend" v-model="select" class="sel3" placeholder="请选择">
                        <el-option label="汽车品牌" value="1" />
                        <el-option label="汽车类型" value="2" />
                        <el-option label="车牌号" value="3" />
                    </el-select>
                    <el-button slot="append" v-model="searchInf" icon="el-icon-search" @click="searchMes" />
                </el-input>
            </div>

            <el-dialog title="车辆信息添加" :visible.sync="dialogFormVisible">
                <el-form class="form">
                    <el-form-item class="item" label="车辆品牌" :label-width="formLabelWidth">
                        <el-input v-model="addMes.carBrand" class="in" autocomplete="off" />
                    </el-form-item>
                    <el-form-item class="item" label="车辆型号" :label-width="formLabelWidth">
                        <el-input v-model="addMes.carModel" class="in" autocomplete="off" />
                    </el-form-item>
                    <el-form-item class="item" label="车辆类型" :label-width="formLabelWidth">
                        <el-input v-model="addMes.carType" class="in" autocomplete="off" />
                    </el-form-item>
                    <el-form-item class="item" label="载货量" :label-width="formLabelWidth">
                        <el-input v-model="addMes.carryFreightWeight" class="in" autocomplete="off" />
                    </el-form-item>
                    <el-form-item class="item" label="车牌号" :label-width="formLabelWidth">
                        <el-input v-model="addMes.licensePlateNumber" class="in" autocomplete="off" />
                    </el-form-item>
                    <div class="sel">
                        <el-select v-model="addMes.carStatus" class="sel2" placeholder="请选择状态">
                            <el-option label="空闲" value="空闲" />
                            <el-option label="忙碌" value="忙碌" />
                            <el-option label="维修" value="维修" />
                        </el-select>
                    </div>
                    <el-form-item class="item" label="备注" :label-width="formLabelWidth">
                        <el-input v-model="addMes.remark" class="in" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addDispatchOrderLogistics()">确 定</el-button>
                </div>
            </el-dialog>

            <el-table :data="mes" type="" style="width: 100%">
                <el-table-column prop="carBrand" label="车辆品牌" width="180" />
                <el-table-column prop="carModel" label="车辆型号" width="180" />
                <el-table-column prop="carType" label="车辆类型" width="180" />
                <el-table-column prop="carryFreightWeight" label="载货量" width="180" />
                <el-table-column prop="licensePlateNumber" label="车牌号" />
                <el-table-column prop="carStatus" label="调度状态" />
                <el-table-column prop="remark" label="备注" />

                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="mes[scope.$index].isShow = true">修改</el-button>
                        <el-button type="text" style="color:red" @click="mes[scope.$index].isShowDel = true">删除</el-button>

                        <el-dialog :modal-append-to-body="false" title="提示" :visible.sync="mes[scope.$index].isShowDel"
                            width="30%">
                            <span>确认要删除此条信息吗？</span>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="mes[scope.$index].isShowDel = false">取 消</el-button>
                                <el-button type="primary" @click="dispatchOrderLogisticsDel(scope.$index)">确 定</el-button>
                            </span>
                        </el-dialog>

                        <el-dialog :modal-append-to-body="false" title="修改信息" :visible.sync="mes[scope.$index].isShow">
                            <el-form class="form">
                                <el-form-item class="item" label="车辆品牌" :label-width="formLabelWidth">
                                    <el-input v-model="mes[scope.$index].carBrand" autocomplete="off" />
                                </el-form-item>
                                <el-form-item class="item" label="车辆型号" :label-width="formLabelWidth">
                                    <el-input v-model="mes[scope.$index].carModel" autocomplete="off" />
                                </el-form-item>
                                <el-form-item class="item" label="车辆类型" :label-width="formLabelWidth">
                                    <el-input v-model="mes[scope.$index].carType" autocomplete="off" />
                                </el-form-item>
                                <el-form-item class="item" label="载货量" :label-width="formLabelWidth">
                                    <el-input v-model="mes[scope.$index].carryFreightWeight" autocomplete="off" />
                                </el-form-item>
                                <div class="sel">
                                    <el-select v-model="mes[scope.$index].carStatus" class="sel2" placeholder="请选择状态">
                                        <el-option label="空闲" value="空闲" />
                                        <el-option label="忙碌" value="忙碌" />
                                        <el-option label="维修" value="维修" />
                                    </el-select>
                                </div>
                                <el-form-item class="item" label="车牌号" :label-width="formLabelWidth">
                                    <el-input v-model="mes[scope.$index].licensePlateNumber" autocomplete="off" />
                                </el-form-item>
                                <el-form-item class="item" label="备注" :label-width="formLabelWidth">
                                    <el-input v-model="mes[scope.$index].remark" autocomplete="off" />
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="mes[scope.$index].isShow = false">取 消</el-button>
                                <el-button type="primary" @click="changeDriver(scope.$index)">确 定</el-button>
                            </div>
                        </el-dialog>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination :page-size="5" layout="prev, pager, next, jumper" :total="pageSize"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
  
<script>
import request from '../../utils/request'
export default {
    name: 'carLogistics',
    data() {
        return {
            mes: [],
            dialogTableVisible: false,
            formLabelWidth: '120px',
            addMes: {
                "carBrand": "",
                "carColor": "",
                "carModel": "",
                "carStatus": "",
                "carType": "",
                "carryFreightWeight": "",
                "garageId": "1575856020293439490",
                "id": null,
                "licensePlateNumber": "",
                "operationCertificateNumber": "",
                "remark": ""
            },
            dialogFormVisible: false,
            pageSize: null,
            select: '',
            searchInf: '',
            input3: ''
        }
    },
    async mounted() {
        this.logisticsOrderLogistics()
    },
    methods: {
        async logisticsOrderLogistics() {
            await request({
                method: 'get',
                url: '/zk/carLogistics/get/1/5'
            }).then((response) => {
                console.log(response)
                this.mes = response.data.records
                for (let i = 0; i < this.mes.length; i++) {
                    this.$set(this.mes[i], 'isShow', false)
                    this.$set(this.mes[i], 'isShowDel', false)
                }
                this.pageSize = response.data.total
            })
        },
        async changeDriver(index) {
            console.log(this.mes[index])
            const driverLogistics = {
                "carBrand": this.mes[index].carBrand,
                "carColor": this.mes[index].carColor,
                "carModel": this.mes[index].carModel,
                "carStatus": this.mes[index].carStatus,
                "carType": this.mes[index].carType,
                "carryFreightWeight": this.mes[index].carryFreightWeight,
                "garageId": this.mes[index].garageId,
                "id": this.mes[index].id,
                "licensePlateNumber": this.mes[index].licensePlateNumber,
                "operationCertificateNumber":this.mes[index].operationCertificateNumber ,
                "remark": this.mes[index].remark
            }
            console.log(driverLogistics)
            await request({
                method: 'put',
                url: '/zk/carLogistics/update/' + this.mes[index].id,
                data: driverLogistics
            }).then(response => {
                if (response.statusCode == 20000) {
                    this.dialogFormVisible = false
                    this.addMes = {}
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '发生错误，修改失败',
                        type: 'warning'
                    })
                }
            })
            this.logisticsOrderLogistics()
            this.mes[index].isShow = false
        },
        async dispatchOrderLogisticsDel(index) {
            await request({
                method: 'delete',
                url: '/zk/carLogistics/delete/' + this.mes[index].id
            }).then(response => {
                console.log(response)
                if (response.statusCode == 20000) {
                    this.dialogFormVisible = false
                    this.addMes = {}
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '发生错误，添加失败',
                        type: 'warning'
                    })
                }
            })
            this.logisticsOrderLogistics()
            this.mes[index].isShowDel = false
        },
        async addDispatchOrderLogistics() {
            request({
                method: 'post',
                url: '/zk/carLogistics/save',
                data: this.addMes
            }).then(response => {
                console.log(response)
                if (response.statusCode == 20000) {
                    this.dialogFormVisible = false
                    this.addMes = {}
                    this.logisticsOrderLogistics()
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                } else {
                    this.$message({
                        message: '发生错误，添加失败',
                        type: 'warning'
                    })
                }
            })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange(val) {
            request({
                method: 'get',
                url: '/zk/carLogistics/get/' + val + '/5'
            }).then((response) => {
                console.log(response)
                this.mes = response.data.records
                for (let i = 0; i < this.mes.length; i++) {
                    this.$set(this.mes[i], 'isShow', false)
                    this.$set(this.mes[i], 'isShowDel', false)
                }
                this.pageSize = response.data.total
            })
        },
        searchMes() {
            if (this.select == '1') {
                const data = {
                    carBrand: this.input3
                }
                request({
                    url: '/zk/carLogistics/get',
                    method: 'post',
                    data: data
                }).then(response => {
                    if (response.statusCode == 20000) {
                        this.$message({
                            message: '查询成功',
                            type: 'success'
                        })
                        console.log(response)
                        this.mes = response.data
                        for (let i = 0; i < this.mes.length; i++) {
                            this.$set(this.mes[i], 'isShow', false)
                            this.$set(this.mes[i], 'isShowDel', false)
                        }
                        this.pageSize = response.data.length
                    } else {
                        this.$message({
                            message: '查无此人，查询失败',
                            type: 'warning'
                        })
                    }
                })
            } else if (this.select == '2') {
                const data = {
                    carType: this.input3
                }
                request({
                    url: '/zk/carLogistics/get',
                    method: 'post',
                    data: data
                }).then(response => {
                    if (response.statusCode == 20000) {
                        this.$message({
                            message: '查询成功',
                            type: 'success'
                        })
                        console.log(response)
                        this.mes = response.data
                        for (let i = 0; i < this.mes.length; i++) {
                            this.$set(this.mes[i], 'isShow', false)
                            this.$set(this.mes[i], 'isShowDel', false)
                        }
                        this.pageSize = response.data.length
                    } else {
                        this.$message({
                            message: '查无此人，查询失败',
                            type: 'warning'
                        })
                    }
                })
            } else if (this.select == '3') {
                const data = {
                    licensePlateNumber: this.input3
                }
                request({
                    url: '/zk/carLogistics/get',
                    method: 'post',
                    data: data
                }).then(response => {
                    if (response.statusCode == 20000) {
                        this.$message({
                            message: '查询成功',
                            type: 'success'
                        })
                        console.log(response)
                        this.mes = response.data
                        for (let i = 0; i < this.mes.length; i++) {
                            this.$set(this.mes[i], 'isShow', false)
                            this.$set(this.mes[i], 'isShowDel', false)
                        }
                        this.pageSize = response.data.length
                    } else {
                        this.$message({
                            message: '查无此人，查询失败',
                            type: 'warning'
                        })
                    }
                })
            }
        }
    }
}
</script>
  
<style lang="scss" scoped>
.header {
    width: 100%;
    height: 350px;
    // border: 1px solid black;
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
}

.form {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
}

.sel {
    width: 310px;
    display: flex;
    // border: 1px solid black;
    justify-content: right;
    align-content: center;
}

.sel2 {
    width: 240px;
}

.page {
    width: 100%;
    display: flex;
    justify-content: right;
}

.imgDri {
    height: 300px;
    width: 400px;
}

.w1 {
    height: 80px;
    font-size: 25px;
    font-weight: 350;
}

.w2 {
    height: 50px;
    font-size: 15px;
    font-weight: 250;
}

.searchHead {
    display: flex;
    justify-content: space-between;
}

.searchIuput {
    width: 350px;
}

.sel3 {
    width: 100px;
}
</style>